window.onload = function () {
    var can = document.getElementById("canvas"),//获取canvas
        ctx = can.getContext("2d"),//画笔
        au_rain = document.getElementById("audio_rain"),
        w = can.width = window.innerWidth,//赋值canvas的宽同时赋值给变量
        h = can.height = window.innerHeight;//赋值canvas的高同时赋值给变量
    /**
     * 当页面发生变化时重新赋值can的宽高并重新赋值w h
     */
    window.onresize = function () {
        w = can.width = window.innerWidth;
        h = can.height = window.innerHeight;
    };
    // 通过函数构造器来创建一个雨滴对象
    function Rain() {}
    /**
     * 给新创建的雨滴对象添加功能，实际上就是添加方法、
     * 通过原型链的方式来添加，本质就是找到Rain的模型来修改模型
     */
    Rain.prototype = {
        /**
         * 雨滴的初始化思路：雨滴是从页面顶部随机x位置落到页面
         * 底部的一个范围内 然后变成由变成透明度
         * 慢慢变淡半径慢慢变大的一个波纹而结束
         * 涉及到的参数有 ：页面顶部的x坐标 页面顶部的y坐标 从上往下掉落的速度
         * 掉落到页面底部的范围值 波纹的的半径 波纹半径变大的速度 波纹的透明度 波纹透明度变淡的速度
         */
        init:function () {
            this.x = Math.random()*w;
            this.y = 0;
            this.speed_y = Math.random()*4 +3;
            this.max_y = (Math.random()*2/10 + 0.6)*h;
            this.r = 1;
            this.speed_r = 1;
            this.opacity = 1;
            this.speed_opacity = 0.96;
        },
        /**
         * 画图的思路：
         * 雨滴只有两种形式、一种是矩形一种是圆形
         * 当其Y值大于其下落的最大的y值时候则画圆否则画矩形
         */
        draw:function () {
            if(this.y > this.max_y){
                // 此时画圆
                ctx.beginPath();//开始一个新的绘制路径
                ctx.strokeStyle = "rgba(0,255,255"+ this.opacity + ")";// 设置弧线的颜色
                ctx.arc(this.x,this.max_y,this.r,0,Math.PI*2,false);//x y r startAngle endAngle 是否逆时针绘图
                ctx.stroke();//关闭
                au_rain.play();
            }else {
                ctx.fillStyle = "rgb(0,255,255)";
                ctx.fillRect(this.x,this.y,5,10)
            }
            this.update();//因为此时画的图是不动的，必须不停重绘才能改变其对应的值
        },
        /**
         * 更新的思路：
         * 如果y的值小于最大的y的值此时水滴还是矩形
         * 则需要不更更新其y值，若其y值大于其max_y值则其已变成
         * 咯圆形，则需要更新圆形的半径和透明度
         * 并且需要在圆形的透明度在小于某个值时（肉眼看不太清时）
         * 做特殊处理---->重新初始化
         */
        update:function () {
            if(this.y < this.max_y){
                this.y += this.speed_y;
            }else {
                this.opacity *= this.speed_opacity;
                this.r += this.speed_r;
                if(this.opacity < 0.01){
                    this.init();
                    au_rain.pause();
                }
            }
        }
    };
    /**
     * 每过200ms生成一个雨滴并存放在容器中
     * @type {Array}
     */
    var Rains = [];//定义一个存放雨滴的容器
    for(var i = 0;i < 30;i++){
        setTimeout(function () {
            var obj = new Rain();
            obj.init();
            Rains.push(obj);
        },i*200)
    }
    /**
     * 根据屏幕刷新频率调用draw方法即改变y值生成雨滴下落的动画
     * http://www.cnblogs.com/xiaohuochai/p/5777186.html
     */
    ~function move() {
        ctx.fillStyle = "rgba(0,0,0,0.1)";
        ctx.fillRect(0,0,w,h);
        for(var i = 0;i<Rains.length;i++){
            Rains[i].draw();
        }
        requestAnimationFrame(move);
    }();
};